<template>
	<view>
		<u-navbar title="黑名单" bgColor="#4a62e7" titleStyle="color:#fff" placeholder autoBack leftIconColor="#fff"></u-navbar>
		<u-sticky bgColor="#4a62e7" :customNavHeight="44 + statusBarHeight">
			<view class="back_4a62e7 c-fff pad10-15 displayAli_cen">
				<view class="wid100 backFFF bor_radius30 padLR10 c-000">
					<newCarNumberTwo ref="carNumber" :value="licenseNo" @input="(e)=>onChangeCarNumber(e,'search')" @clearValue="clearValue" :placeholder="'输入车牌号码'" />
				</view>
				<u-button style="width: 60px;height:35px;color: #4a62e7;" class="mal-10" text="查询" color='#fff' @click="search()"></u-button>
			</view>
		</u-sticky>
		
		<view class="pad10">
			<view class="pad15 backFFF mab8 bor_radius8 lineH1_5" v-for="(item,index) in blackList" :key="index" @click="goToDetail(item)">
				<view class="c-000 fts16 ftwt">{{item.license}}</view>
				<view class="c-919EAB fts14">号牌种类：{{item.licensecode}}</view>
				<view class="c-919EAB fts14">号牌颜色：{{item.licensetype}}</view>
			</view>
		</view>
		<u-loading-icon v-if="loading"></u-loading-icon>
		<u-empty v-if="blackList.length==0" text='暂无数据' textColor='#000' marginTop='80'></u-empty>
		
		<!-- 黑名单添加按钮 -->
		<view class="blackListAdd display juzhong" @click="clickAddBtn()">
			<view class="mab8">＋</view>
		</view>
		<!-- 详情弹窗 -->
		<u-popup :show="modalDetail" width="300px" :round="10" mode="center" @close="modalDetail=false">
			<view class="c-919EAB fts14 pad20" style="width: 280px;">
				<view class="fts16 ftwt mab10 c-000">{{detailInfo.license}}</view>
				<view class="lineH1_6">
					<view>号牌种类：{{detailInfo.licensecode}}</view>
					<view>号牌颜色：{{detailInfo.licensetype}}</view>
					<view>车辆型号：{{detailInfo.vehiclemodel}}</view>
					<view>车辆识别代号：{{detailInfo.vin}}</view>
					<view>机动车所有人：{{detailInfo.owner}}</view>
					<view>黑名单类型：{{detailInfo.lx }}</view>
					<view>锁定日期：{{detailInfo.wdate}}</view>
					<view>锁定人：{{detailInfo.sdr}}</view>
					<view>锁定原因：{{detailInfo.reason}}</view>
					<view>锁定机构：{{detailInfo.sdjg}}</view>
					<view>是否解锁：{{detailInfo.sfjs}}</view>
				</view>
				
				<view v-if="detailInfo.sfjs=='锁定'" class="displayAli_cen justify-spb mat20">
					<button class="Btn2 wid45" style="height: 40px;" type="button" @click="modalDetail=false">取消</button>
					<button class="Btn1 wid45" style="height: 40px;" type="button" @click="confirmUnlock">解锁</button>
				</view>
			</view>
		</u-popup>
		
		<!-- 添加黑名单弹窗 -->
		<u-modal :show="addBlackListShow" showCancelButton width="300px" confirmText='保存' @close="addBlackListShow=false" @cancel="closeAdd" @confirm="confirmAdd">
			<view class="c-000 fts14">
				<view class="fts16 ftwt mab10">添加黑名单</view>
				<view class='bor_bottom_e8'>
					<carNumber ref="carNumber1" :value="addBlackListInfo.licenseNo" @input="(e)=>onChangeCarNumber(e,'add')"/>
				</view>
				<view class="license-box bor_bottom_e8" @click="licenseTypeShow=true">
					<view class="title-box">号牌种类</view>
					<view class="displayAli_cen flex1">
						<u--input v-model="addBlackListInfo.licenseType" readonly inputAlign="right" placeholder="请选择" border="none"></u--input>
						<view><u-icon name="arrow-right" color="#b7bbbf"></u-icon></view>
					</view>
				</view>
				<view class="license-box bor_bottom_e8" @click="carColorShow=true">
					<view class="title-box">号牌颜色</view>
					<view class="displayAli_cen flex1">
						<u--input v-model="addBlackListInfo.carColor" readonly inputAlign="right" placeholder="请选择" border="none"></u--input>
						<view><u-icon name="arrow-right" color="#b7bbbf"></u-icon></view>
					</view>
				</view>
				<view class='paddingTB15px bor_bottom_e8'>
					<u--input v-model="addBlackListInfo.vin" placeholder="请输入车辆识别代号" border="none"></u--input>
				</view>
				<view class='paddingTB15px bor_bottom_e8'>
					<u--input v-model="addBlackListInfo.carModel" placeholder="请输入车辆型号" border="none"></u--input>
				</view>
				<view class="license-box bor_bottom_e8" @click="unlockTypeShow=true">
					<view class="title-box">锁定类型</view>
					<view class="displayAli_cen flex1">
						<u--input v-model="addBlackListInfo.blackType" readonly inputAlign="right" placeholder="请选择" border="none"></u--input>
						<view><u-icon name="arrow-right" color="#b7bbbf"></u-icon></view>
					</view>
				</view>
				<view class='paddingTB15px bor_bottom_e8'>
					<u--input v-model="addBlackListInfo.carOwner" placeholder="请输入机动车所有人" border="none"></u--input>
				</view>
				<view class='paddingT15px'>
					<!-- <u--input v-model="addBlackListInfo.lockReason" placeholder="请输入锁定原因" border="none"></u--input> -->
					<u--textarea v-model="addBlackListInfo.lockReason" placeholder="请输入锁定原因" ></u--textarea>
				</view>
			</view>
		</u-modal>
		<!-- 号牌种类 -->
		<AsiPicker :show="licenseTypeShow" title='号牌种类' :list='licenseTypeList' label='itemLabel' @onConfirm="(e)=>onConfirmHandler(e,'licenseType','licenseTypeShow')" @onClose='licenseTypeShow=false' @scrolltolower='QDscrolltolower'></AsiPicker>
		<!-- 号牌颜色 -->
		<AsiPicker :show="carColorShow" title='号牌颜色' :list='carColorList' label='itemLabel' @onConfirm="(e)=>onConfirmHandler(e,'carColor','carColorShow')" @onClose='carColorShow=false' @scrolltolower='QDscrolltolower'></AsiPicker>
		<!-- 选择解锁（锁定）类型 -->
		<AsiPicker :show="unlockTypeShow" title='解锁类型' :isClear='isClear' :isSearch='false' :list='unlockTypeList' label='itemLabel' @onConfirm="(e)=>onConfirmHandler(e,'unlockTypeValue','unlockTypeShow')" @onClose='unlockTypeShow=false'></AsiPicker>
		
	</view>
</template>

<script>
	import newCarNumberTwo from '@/components/newCarNumberTwo/index.vue'
	import carNumber from '@/components/carNumber/index.vue'
	import AsiPicker from '@/components/common/AsiPicker.vue'
	const {
		globalData: {
			statusBarHeight
		}
	} = getApp()
	export default {
		components: {
			newCarNumberTwo,AsiPicker,carNumber
		},
		data() {
			return {
				requestUrl:'http://'+uni.getStorageSync("IPNumber")+':'+uni.getStorageSync("portNumber") +'/vepts/api/v1/guiyang',
				statusBarHeight,
				licenseNo: '',
				blackList: [],
				page: 1,
				size: 20,
				loading: false,
				
				modalDetail:false,
				detailInfo:'', // 详情信息
				
				unlockTypeList:[], // 解锁类型
				unlockTypeShow:false, // 解锁类型弹窗
				unlockTypeValue:'', 
				isClear:false, // 是否清空弹窗选中
				
				// 添加黑名单
				addBlackListShow:false, // 添加黑名单弹窗
				addBlackListInfo:{
					licenseNo:'',
					licenseType:'',
					carColor:'',
					vin:'',
					carModel:'',
					carOwner:'',
					blackType:'',
					lockReason:'',
				},
				
				licenseTypeShow: false, // 号牌种类选择
				licenseTypeList: [], // 号牌种类
				carColorShow: false, // 号牌颜色选择
				carColorList: [], // 号牌颜色
				
			}
		},
		onLoad() {
			this.unlockTypeList = this.$staticData.unlockTypeList
			this.search() // 查询数据
			uni.$on('initialization', res => { //
				this.search() // 初始化列表
			})
		},
		onReachBottom() { // 触底刷新
			console.log("触底");
			this.page++
			this.getBlackList(); //查询黑名单
		},
		methods: {
			clickAddBtn(){ // 点击添加按钮
				// this.addBlackListShow=true
				uni.navigateTo({
					url:'/pages/blackList/addBlackList'
				})
			},
			clearValue(){
					this.licenseNo = ''
					this.$refs.carNumber.focus = false
				},
			onChangeCarNumber(e,type) { // 监听车牌号输入
				let numberType=type=='add'?'carNumber1':'carNumber'
				let value=type=='add'?'addBlackListInfo.licenseNo':'licenseNo'
				console.log(e);
				// 注释老键盘逻辑
				// if((e.length==7&&e.val.length>6) || (e.length==8&&e.val.length>7)){ // 键盘自动关闭
				if (e.length == 10 && e.val.length > 9) { // 键盘自动关闭
					if (this[value].slice(-1) != e.val.slice(-1)) { // 最后一位不相等
						this.$refs[numberType].focus = false
					} else {
						this.$refs[numberType].focus = this[value].length != e.val.length ? false : true
					}
				}
				this[value] = e.val
			},
			goToDetail(item){
				this.detailInfo=item
				this.modalDetail=true
			},
			
			confirmUnlock(){ // 点击解锁
				console.log('解锁');
				this.unlockTypeShow = true
			},
			onConfirmHandler(e, property, show){ // 选择器确认选择	
				if(!e){
					this.$all.toast('请先选择选项')
					return
				}
				if(property=='unlockTypeValue'){ // 解锁类型
					if(this.addBlackListShow){ // 添加黑名单时的锁定类型
						this.addBlackListInfo.blackType= e.itemValue
					}else{
						this[property]= e.itemValue
						this.unlockBlackList() // 解锁黑名单
					}
				} else{ // 添加黑名单时确认选择
					this.addBlackListInfo[property]= e.itemValue
				}
				console.log('解锁类型',e)
				this[show] = false
			},
			QDscrolltolower(e){ // 监听下拉滚动触底
				console.log(e);
				// this.DYJpage++
				// this.getToBeTested() //查询待预检列表
			},
			
			confirmAdd(){
				console.log('确定保存');
				this.closeAdd()
			},
			closeAdd(){
				this.addBlackListShow = false
				this.addBlackListInfo=this.$options.data().addBlackListInfo
			},
			
			// ----------------- 接口请求
			search() { // 重新查询
				this.page = 1
				this.blackList = []
				this.getBlackList(); //查询黑名单
			},
			getBlackList() { // 点击查询
				this.loading=true
				let params = {
					"page": this.page,
					"size": this.size,
					"license": this.licenseNo,
				}
				this.$ajax.myRequest({
					url: this.requestUrl + '/blacklist',
					data: params,
					method: 'POST',
					success: (res) => {
						console.log(res);
						this.loading=false
						if (res.data.code == 200 && res.data.data) {
							let data=res.data.data
							if(data.length>0){
								this.blackList.push(...data)
							}else{
								this.blackList= this.page==1?[]:this.blackList
							}
						}else{
							this.$all.toast(res.data.msg)
						}
					},
				})
			},
			
			unlockBlackList() { // 黑名单解锁
				let params = {
					"keyid": this.detailInfo.id, 
					"license": this.detailInfo.license,
					"jsr": uni.getStorageSync('loginName'), // 解锁人(登录用户名）
					"jsjg": uni.getStorageSync('tsno'), // 解锁机构（登录配置的检测站编号）
					"jslx": this.unlockTypeValue, // 解锁类型
					"address": uni.getStorageSync('IPNumber'), // 客户登录的ip地址
				}
				this.$ajax.myRequest({
					url: this.requestUrl + '/hmdjs',
					data: params,
					method: 'POST',
					success: (res) => {
						console.log(res);
						this.$all.toast(res.data.msg)
						if (res.data.code == 200) {
							this.modalDetail = false
							this.isClear=true
							this.search() //重新查询黑名单
						}
					},
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.blackListAdd{
		position: fixed;bottom: 10vh;right: 10vw;background-color: #4a62e7;width: 50px;border-radius: 50%;color: #fff;text-align: center;height: 50px;font-size: 50px;font-weight: 600;
		// box-shadow: 2px 2px 8px 1px rgba(0,0,0,.3);
	}

	.license-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	
		.title-box {
			display: flex;
			align-items: center;
			padding: 15rpx 0;
			font-size: 30rpx;
			color: #333;
			margin-right: 15px;
		}
	}

</style>
